import 'package:flutter/material.dart';
import 'package:ost_flutter_module/common/adapt.dart';
import 'package:ost_flutter_module/common/color.dart';
import 'package:ost_flutter_module/common/styles.dart';

typedef onTapF<T> = void Function(T value);

class WrapTag extends StatelessWidget {
  final List<String> titles;
  final TextStyle style;
  final Color color;
  final double spacing, runSpacing, padding, height, borderRadius;
  final onTapF onTap;

  const WrapTag({
    Key key,
    this.titles,
    this.style,
    this.color,
    this.padding = 6,
    this.height = 22,
    this.borderRadius = 11,
    this.spacing = 4,
    this.runSpacing = 4,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: Adapt.px(spacing),
      runSpacing: Adapt.px(runSpacing),
      children: List.generate(
        titles.length,
        (index) => TagWidget(
          title: titles[index] ?? '',
          style: style,
          color: color ?? color1A92CA3C,
          padding: padding,
          height: height,
          borderRadius: borderRadius,
          onTap: onTap != null ? (value) => onTap(value) : null,
        ),
      ),
    );
  }
}

class TagWidget extends StatelessWidget {
  final String title;
  final TextStyle style;
  final Color color;
  final double padding, height, borderRadius;
  final onTapF onTap;

  const TagWidget({
    Key key,
    this.title,
    this.style,
    this.color,
    this.padding,
    this.height,
    this.borderRadius,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: color,
      borderRadius: BorderRadius.circular(Adapt.px(borderRadius)),
      child: Ink(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Adapt.px(borderRadius)),
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(Adapt.px(borderRadius)),
          onTap: onTap != null ? () => onTap(title) : null,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: Adapt.px(padding)),
            child: SizedBox(
              height: Adapt.px(height),
              child: Center(
                child: Text(
                  title,
                  style: style ?? TextStyles.tagTitleStyle,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
